<template>
  <div class="content" top>
    <div class="head">
      <div class="head-box">
        <!-- 左侧图片区域 -->
        <div class="head-left">
          <div style="margin-top: 35px">
            <img src="../assets/search-icon.png" alt="" 
            style="
                  width: 400px;
                  height: 80px;
                  margin: auto 0;
                  object-fit: contain;
                " />
          </div>
        </div>
        <!-- 右侧时间与按钮 -->
        <div class="head-right">
          <div class="hright-time">
            <div class="time-detail" style="margin-top: 20px">
              {{ gettiem }}
            </div>

            <div class="hright-week">
              {{ week }}
            </div>
          </div>
          <!-- 搜索按钮 -->
          <div class="hright-search">
            <div style="width: 200px; height: 40px">
              <input type="text" autocomplete="off" placeholder="搜索" class="el-input" @click="goSearch()" />
              <span class="input-icon">
                <img src="../assets/input-search.png" alt="" style="width: 18px; height: 18px" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="navgitor">
      <div class="item-box">
        <!-- 跳转到首页 -->
        <router-link to="/index" class="navgitor-item">首页</router-link>
        <!-- 跳转到其他页面，注意看to 首/New?name=加上字符串，然后进行跳转-->
        <router-link :to="'/News?name=' + item.title" v-for="(item, index) in navList" :key="item.id"
          class="navgitor-item">{{ index < 10 ? item.title : "" }}</router-link>
            <div v-if="navListOther != []" class="navgitor-item" @click.stop="ShowHidden = !ShowHidden">
              更多
            </div>
      </div>
      <!-- 点击更多的隐藏栏 -->
      <div class="more-detail" v-show="ShowHidden">
        <router-link :to="'/News?name=' + item.title" v-for="item in navListOther" :key="item.id"
          class="more-detail-item">{{ item.title }}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllNavigation } from "../api/Header";
export default {
  name: 'Top',
  data() {
    return {
      navList: [],
      navListOther: [],
      week: "",
      gettiem: "",
      ShowHidden: false,
    };
  },
  methods: {
    // 获取当前时间日期
    getTime() {
      //当前年月日时分秒
      setInterval(() => {
        let yy = new Date().getFullYear();
        let mm =
          new Date().getMonth() + 1 < 10
            ? "0" + (new Date().getMonth() + 1)
            : new Date().getMonth() + 1;
        let dd =
          new Date().getDate() < 10
            ? "0" + new Date().getDate()
            : new Date().getDate();
        let hh =
          new Date().getHours() < 10
            ? "0" + new Date().getHours()
            : new Date().getHours();
        let mf =
          new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
        let ss =
          new Date().getSeconds() < 10
            ? "0" + new Date().getSeconds()
            : new Date().getSeconds();
        var gettime = hh + ":" + mf + ":" + ss;
        let wk = new Date().getDay();
        let weeks = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        let week = weeks[wk];
        this.week = yy + "-" + mm + "-" + dd + " " + week;
        this.gettiem = gettime;
      }, 1000);
    },
    //跳转Search页面
    goSearch() {
      this.$router.push("/Search");
    },
    // 更多按钮显示与隐藏
    HiddenClick() {
      this.ShowHidden = false;
    },
  },
  created() { },
  mounted() {
    // 全局点击隐藏更多栏
    document.addEventListener("click", this.HiddenClick);
    // 获取首页时间数据
    this.getTime();

    // 获取首页数据

    getAllNavigation().then((res) => {
      let num = 0;
      res.rows.forEach((element) => {
        num++;
        if (num < 11) {
          this.navList.push(element);
        } else {
          this.navListOther.push(element);
        }
      });
    }).catch(err => {
      console.log(err);
    })
  },
};
</script>
<style lang="less"  scoped>
.content {
  position: relative;
  width: 100%;
  height: 191px;

  // 头部部分
  .head {
    position: absolute;
    height: 149px;
    background-image: url("/src/assets/head-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 100%;

    .head-box {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      text-align: left;

      .head-left {
        width: 480px;

        height: 149px;
      }

      .head-right {
        width: 720px;
        height: 149px;
        display: flex;
        flex-direction: column;

        .hright-time {
          width: 720px;
          height: 94px;
          text-align: right;

          .time-detail {
            font-size: 30px;
            font-weight: bold;
            color: #34363f;
            line-height: 32px;
            font-family: "LetsgoDigita";
          }

          .hright-week {
            font-size: 9px;
            font-family: NotoSansHans-Regular;
            font-weight: 400;
            color: #34363f;
            line-height: 12px;
          }
        }

        .hright-search {
          position: relative;
          width: 720px;
          height: 45px;

          display: flex;
          justify-content: end;
          align-items: center;

          .el-input {
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 30px;
            -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 100%;
          }

          .input-icon {
            position: absolute;
            top: 12px;
            right: 172px;
          }
        }
      }
    }
  }

  // 导航栏样式
  .navgitor {
    width: 100%;
    position: absolute;
    background-color: #ba0825;
    height: 42px;
    top: 149px;
    user-select: none;

    .item-box {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .navgitor-item {
        line-height: 42px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        font-family: NotoSansHans-Bold;
        font-weight: bold;
        color: #ffdcab;
      }

      .navgitor-item:hover {
        color: #ffffff;
      }
    }
  }

  // 点击更多
  .more-detail {
    width: 1234px;
    height: 42.8px;
    margin: 0 auto;
    background-color: rgba(255, 248, 249, 0.95);

    .more-detail-item {
      height: 42px;
      display: inline-block;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
      font-size: 14px;
      padding: 0 20px;
      color: #ba0825;
    }
  }
}
</style>
 